<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>$Title$</title>
</head>
<script type="text/javascript" src="/js/jquery-2.1.4.min.js"  th:src="@{/js/jquery-2.1.4.min.js}"></script>
<script type="text/javascript" src="/js/bootstrap-3.3.7-dist/js/bootstrap.min.js"  th:src="@{/js/bootstrap-3.3.7-dist/js/bootstrap.min.js}"></script>
<link type="text/css" href="/js/bootstrap-3.3.7-dist/css/bootstrap.min.css"  rel="stylesheet" th:href="@{/js/bootstrap-3.3.7-dist/css/bootstrap.min.css}">
<script type="text/javascript" src="/js/bootstrap-treeview/bootstrap-treeview.min.js" th:src="@{/js/bootstrap-treeview/bootstrap-treeview.min.js}"></script>
<link type="text/css" href="/js/bootstrap-treeview/bootstrap-treeview.min.css" rel="stylesheet" th:href="@{/js/bootstrap-treeview/bootstrap-treeview.min.css}">
<script type="text/javascript" src="/js/bootStrap-addTabs/bootstrap.addtabs.min.js" th:src="@{/js/bootStrap-addTabs/bootstrap.addtabs.min.js}"></script>
<link type="text/css" href="/js/bootStrap-addTabs/bootstrap.addtabs.css" rel="stylesheet" th:href="@{/js/bootStrap-addTabs/bootstrap.addtabs.css}">
<script type="text/javascript" src="/js/bootstrap-table/bootstrap-table.js" th:src="@{/js/bootstrap-table/bootstrap-table.js}"></script>
<link type="text/css"  href="/js/bootstrap-table/bootstrap-table.css" rel="stylesheet" th:href="@{/js/bootstrap-table/bootstrap-table.css}">
<script type="text/javascript" src="/js/bootstrap-fileinput/js/fileinput.min.js" th:src="@{/js/bootstrap-fileinput/js/fileinput.min.js}"></script>
<script type="text/javascript" src="/js/bootstrap-bootbox/bootbox.js"  th:src="@{/js/bootstrap-bootbox/bootbox.js}"></script>
<script type="text/javascript" src="/js/bootstrap-fileinput/js/locales/zh.js" th:src="@{/js/bootstrap-fileinput/js/locales/zh.js}"></script>
<link type="text/css" href="/js/bootstrap-fileinput/css/fileinput.min.css"  rel="stylesheet" th:href="@{/js/bootstrap-fileinput/css/fileinput.min.css}">

<body>
<div id="toolbar">
    <form class="form-inline">
        <div  class="form-group">
            <label for="userName">姓名：</label>
            <input class="form-control" id="userName" placeholder="请输入名称">
        </div>
        <div  class="form-group">
            <label for="userSite">地址：</label>
            <input class="form-control" id="userSite" placeholder="请输入地址">
        </div>
        <div  class="form-group">
            <label for="startDate">创建时间：</label>
            <input class="form-control date" id="startDate" type="date">
        </div>
        <div  class="form-group">
            <label for="endDate">至</label>
            <input class="form-control date" id="endDate" type="date">
        </div>

        <div  class="form-group">
            <label for="maxAge">年龄：</label>
            <input class="form-control date" id="maxAge">
        </div>
        <div  class="form-group">
            <label for="minAge">至</label>
            <input class="form-control date" id="minAge" >
        </div>
        <button onclick="search()" class="btn btn-primary glyphicon glyphicon-search" type="button">搜索</button>
        <button onclick="onFreezeAll()" class="btn btn-primary glyphicon glyphicon-search" type="button">批量解冻</button>
        <button onclick="getSort()" class="btn btn-primary glyphicon glyphicon-search" type="button">年龄排序↑↓</button>
        <button onclick="dateOut()" class="btn btn-primary glyphicon glyphicon-search" type="button">注册时间排序↑↓</button>
        <button onclick="moneyOut()" class="btn btn-primary glyphicon glyphicon-search" type="button">总金额排序↑↓ </button>
    </form>
</div>
<!-- 模态框（Modal） -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog"
     aria-labelledby="myModalLabel" aria-hidden="true">
    <form id="myForm">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal"
                            aria-hidden="true">&times;</button>
                    <h4 class="modal-title" id="myModalLabel">修改</h4>
                </div>
                <div class="modal-body">在这里添加一些文本</div>
                <div class="input-group">
                    <span class="input-group-addon" >用户名</span>
                    <input type="text" class="form-control"  name="userName">
                    <input type="hidden" id="userId" name="userId">
                </div>
                <div class="input-group">
                    <span class="input-group-addon">性别</span>
                    <input type="radio" name="userSex" id="userSex2" value="1" disabled> 男
                    <input type="radio" name="userSex" id="userSex" value="2" disabled> 女
                </div>
                <div class="input-group">
                    <span class="input-group-addon">密码</span>
                    <input type="text" class="form-control" id="userPwd" name="userPwd">
                </div>

                <div class="input-group">
                    <span class="input-group-addon">账号</span>
                    <input type="text" class="form-control" id="userNum" name="userNum" disabled>
                </div>
                <div class="input-group">
                    <span class="input-group-addon">头像</span>
                    <div role="tabpanel" class="tab-pane active" id="home">
                        <input id="file-Portrait" multiple name="imgfile" type="file">
                    </div>
                    <input type="hidden" class="form-control" id="userImg" name="userImg" >
                </div>
                <div class="input-group">
                    <span class="input-group-addon">创建时间</span>
                    <input type="date" class="form-control" id="createDate" name="createDate" disabled>
                </div>
                <div class="input-group">
                    <span class="input-group-addon">电话号码</span>
                    <input type="text" class="form-control" id="useriPhone" name="useriPhone">
                </div>
                <div class="input-group">
                    <span class="input-group-addon">邮箱</span>
                    <input type="text" class="form-control" id="userEmail" name="userEmail">
                </div>

                <div class="input-group">
                    <span class="input-group-addon">出生日期</span>
                    <input type="date" class="form-control" id="userDate" name="userDate" disabled>
                </div>
                <div class="input-group">
                    <span class="input-group-addon">身份证号</span>
                    <input type="text" class="form-control" id="userCard" name="userCard" readonly>
                </div>
                <div class="input-group">
                    <span class="input-group-addon">消费总额</span>
                    <input type="text" class="form-control" id="totalSum" name="totalSum" readonly>
                </div>
                <div class="input-group">
                    <span class="input-group-addon">地址</span>
                    <input type="text" class="form-control"  name="userSite">
                </div>
                <div class="input-group">
                    <span class="input-group-addon">年龄</span>
                    <input type="text" class="form-control" id="userAge" name="userAge" readonly>
                </div>

                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                    <button type="button" class="btn btn-default" data-dismiss="modal" onclick="updateUser()">保存</button>
                </div>
            </div>
            <!-- /.modal-content -->
        </div>
        <!-- /.modal -->
    </form>
</div>



<table id="table"></table>
</body>
<script>

    //页面加载方法
    $(function(){
        initUserTable2();
    })
    //初始化用户表格
    function initUserTable2(){
        $("#table").bootstrapTable({
            url:"../user/findFreezeUser",
            method : 'GET', //请求方式（*）
            //toolbar: '#toolbar',              //工具按钮用哪个容器
            striped : true, //是否显示行间隔色
            cache : false, //是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*）
            pagination : true, //是否显示分页（*）
            sortable : true, //是否启用排序
            sortOrder : "asc", //排序方式
            sidePagination : "client", //分页方式：client客户端分页，server服务端分页（*）
            pageNumber : 1, //初始化加载第一页，默认第一页,并记录
            pageSize : 3, //每页的记录行数（*）
            pageList : [ 3,6,9,20], //可供选择的每页的行数（*）
            search : false, //是否显示表格搜索
            strictSearch : true,
            showRefresh : true, //是否显示刷新按钮     //可供选择的每页的行数（*）
            toolbar:"#toolbar",
            columns:[{checkbox : true,
                visible : true},
                {title:"账户",field:"userNum",width:100},
                {title:"姓名",field:"userName",width:100},
                {title:"电话",field:"useriPhone",width:100},
                {title:"邮箱",field:"userEmail",width:100},
                {title:"性别",field:"userSex",width:100,
                    formatter:function(value,row,index){
                        return value==null ?"" :value==1?"男":"女";
                    }},
                {title:"头像",field:"userImg",width:100,
                    formatter:function(value,row,index){
                        return '<img  src='+value+' width="50" height="50"/> ';
                    }
                },
                {title:"创建时间",field:"createDate",width:100},
                {title:"总消费金额",field:"totalSum",width:100},
                {title:"状态",field:"userStatus",width:100,
                    formatter:function(value,row,index){
                        if (value==1){
                            return "正常";
                        }
                        else if(value==2){
                            return "冻结";
                        }
                        else if(value==3){
                            return "回收站";
                        }
                    }},
                {title:"地址",field:"userSite",width:100},
                {title:"年龄",field:"userAge",width:100},
                {title:'操作',field:'s',
                    formatter:function(value,row,index){
                        str= "<button  onclick='UnFreezeUser("+row.userId+")'  type='button' class='btn btn-primary'>解冻</button>";
                        str+= "<button  onclick='getByid("+row.userId+")'  type='button' class='btn btn-primary'>详情</button>";
                        return str;
                    }},
            ],
        })
    }
    //年领排序
    var code=0;
    function   getSort(){
        code++;
        if (code%2==1){
            code=1;
            $("#table").bootstrapTable("refresh", {//userTable2是展示页面的id
                "query": {
                    "userId":code,
                }
            });
        }
        else if(code%2==0){
            code=2;
            $("#table").bootstrapTable("refresh", {//userTable2是展示页面的id
                "query": {
                    "userId":code,
                }
            });
        }
    }

    //日期排序
    var i=0;
    function   dateOut(){
        i++;
        if (i%2==1){
            i=1;
            $("#table").bootstrapTable("refresh", {//userTable2是展示页面的id
                "query": {
                    "userStatus":i,
                }
            });
        }
        else if(i%2==0){
            i=2;
            $("#table").bootstrapTable("refresh", {//userTable2是展示页面的id
                "query": {
                    "userStatus":i,
                }
            });
        }
    }
    //金额排序
    var a=0;
    function   moneyOut(){
        a++;
        if (a%2==1){
            a=1;
            $("#table").bootstrapTable("refresh", {//userTable2是展示页面的id
                "query": {
                    "moneyOut":a,
                }
            });
        }
        else if(a%2==0){
            a=2;
            $("#table").bootstrapTable("refresh", {//userTable2是展示页面的id
                "query": {
                    "moneyOut":a,
                }
            });
        }
    }
    //解冻
    function  UnFreezeUser(id){
        //  alert(id)
        $.ajax({
            url:"../user/UnFreezeUser",
            data:{id:id},
            type:"post",
            success:function(){
                $("#table").bootstrapTable("refresh");
            }
        })
    }
    //回显
    function  getByid(id){
        $("#myModal").modal();
        $.ajax({
            url:"../user/getByid",
            data:{id:id},
            type:"post",
            success:function(data){
                console.log(data);
                for(var i in data){
                    //		console.log(i);
                    $("#myForm input").each(function(index,dom){
                        if (i==$(dom).attr("name")) {
                            $(dom).val(data[i])
                        }
                    })
                }
                /*//单选框回显
                alert(data.userSex);
                $("input[value='"+data.userSex+"']").prop("checked",true);*/
                if (data.userSex==1) {
                    //$("#userSex2").val(data.userSex);
                    $("#userSex2").prop("checked",true);
                }
                else if(data.userSex==2){
                    // $("#userSex").val(data.userSex);
                    $("#userSex").prop("checked",true);
                }
            }
        })
    }
    //批量冻结
    function onFreezeAll() {
        //获取所有被选中的记录
        var rows = $( "#table" ).bootstrapTable( 'getSelections' );
        if (rows.length== 0) {
            alert( "请先选择要冻结的记录!" );
            return ;
        }
        var ids = '' ;
        for ( var i = 0; i < rows.length; i++) {
            ids += rows[i][ 'userId' ] + "," ;
        }
        ids = ids.substring(0, ids.length - 1);
        //alert(ids)
        $.ajax({
            url:"../user/onFreezeAll",
            data:{ids:ids},
            type:"post",
            success:function(){
                $("#table").bootstrapTable("refresh");
            }
        })
    }
</script>
</html>